.toolbar-button {
  @include toolbar-button-style;
  user-select: none;
  min-width: 48px;
  -webkit-app-region: no-drag;
  height: 22px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;

  & > * {
    pointer-events: none;
  }

  .icon {
    display: flex;
    margin: 0 4px;
    svg {
      fill: lighten($aqua, 15%);
      height: 16px;
      width: 16px;
    }
  }

  .text {
    @include label-small;
    white-space: nowrap;
    color: $aqua;
    display: flex;
    line-height: 16px;
    height: 16px;
    padding: 0 4px;
    white-space: nowrap;
  }

  .dropdown-arrow {
    display: flex;
    height: 16px;
    stroke: $gray-5;
    stroke-width: 3px;
    transition: transform 500ms;
    margin: 0 4px;
  }

  &:disabled {
    .icon {
      opacity: 0.25;
    }
    .text {
      opacity: 0.5;
    }
    & + label {
      opacity: 0.5;
    }
    cursor: not-allowed;
  }

  &.dragging {
    background: $blue;
    .text {
      color: white;
    }
    .icon {
      fill: white;
    }
  }
}
